import Sortablejs from 'sortablejs'
import { articleSort } from '@/api/article'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
export const tableRef = ref(null)
export function initSortable(tableList, cb) {
  const el = tableRef.value.$el.querySelector('tbody')
  return new Sortablejs(el, {
    ghostClass: 'ghost-item',
    onEnd({ newIndex, oldIndex }) {
      console.log(newIndex, oldIndex)
      articleSort({
        initRanking: tableList.value[oldIndex].ranking,
        finalRanking: tableList.value[newIndex].ranking
      })
      // 这里一定要重新置空，因为在渲染之出 el元素绑定的key为返回的数据label
      // 而换位置之后重新请求得到的list渲染的时候先看目前元素中是否存在key为当前label的el元素，找到就直接渲染，找不到就创建
      // 所以el的位置旧的位置，所以需要置空删除所有元素，然后遍历重新生成元素
      tableList.value = []
      cb && cb()
      ElMessage.success('排序更改成功')
    }
  })
}
